<template>
  <view class="home">
    <view class="home_header">
      <view class="home_header_title">
        <image src="/static/tabs/caidan.png" mode="" @click="getgroup" />
        <text @click="getgroup">{{ detaildata.ageGroupTitle }}</text>
      </view>
      <image class="home_header_banner" :src="detaildata.ylgyImg" mode="scaleToFill" />
      <view class="home_header_navlist">
        <image :src="detaildata.wxnlImg" mode="scaleToFill" />
        <!-- <view class="home_header_navlist_item" v-for="item in 5">
          <image src="/static/tabs/fengmian.png" mode="aspectFill" />
          <text>大运动</text>
        </view> -->
      </view>
    </view>
    <view class="home_navigation">
      <view class="home_title">
        <text></text>
        <view>亲子时光</view>
      </view>
      <view class="home_navigation_list">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye1" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/shuiqian.png" />
          <view>课程回顾<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye2" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/img.png" />
          <view>课程音乐<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye3" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/yuedu.png" />
          <view>玩具/阅读<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
      </view>
      <!-- <view class="home_navigation_list">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye4" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/music3.png" />
          <view>音乐哆唻咪<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye5" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/music5.png" />
          <view>语言天地<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye6" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/music2.png" />
          <view>玩具乐园<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye7" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/music4.png" />
          <view>磨耳朵<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
      </view>
      <view class="home_navigation_list">
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye8" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/yuedu.png" />
          <view>亲子阅读<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye9" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/shuiqian.png" />
          <view>睡前故事<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
        <view class="home_navigation_list_item" v-for="item in detaildata.yrye10" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image class="img" src="/static/tabs/wanan.png" />
          <view>晚安摇篮曲<text>《{{ item.title }}》</text>
          </view>
          <image class="icon" src="/static/tabs/jiantou.png" />
        </view>
      </view> -->
    </view>
    <view class="home_overview">
      <view class="home_title">
        <text></text>
        <view>智慧成长</view>
      </view>
      <view class="home_overview_list">
        <view class="home_overview_list_item" v-for="item in detaildata.bbcz" :key="item.resContent"
          @click="godetail(item.resContent)">
          <image :src="item.coverImg" mode="aspectFill" />
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <view class="home_topics">
      <view class="home_title" style="margin-top: 10rpx;">
        <text></text>
        <view>早期育儿与养育照顾热点话题</view>
      </view>
      <view class="home_topics_list">
        <view class="home_topics_list_item" v-for="item in detaildata.rdht" :key="item.resContent"
          @click="godetail(item.resContent)">
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { detailGroup } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const detaildata: any = ref({})
const id = ref<any>()
const groupid = ref('')
onLoad(async (options: any) => {
  id.value = options.id
  uni.removeStorageSync('groupid')
  getdetailGroup(id.value, groupid.value, userStore.userInfo?.babyId)
})
onShow(() => {
  groupid.value = uni.getStorageSync('groupid') ? uni.getStorageSync('groupid') : ''
  getdetailGroup(id.value, groupid.value, userStore.userInfo?.babyId)
})
const getdetailGroup = async (id: Number, ageGroupId: Number | string, babyId: Number) => {
  let res: any = await detailGroup({ courseBigId: id, ageGroupId, babyId })
  if (res.code == 0) {
    detaildata.value = res.data
  }
}
const getgroup = () => {
  uni.navigateTo({
    url: `/pages/grouplist/index?id=${id.value}`
  })
}
const godetail = (id: any) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${id}`
  })
}
</script>

<style lang="scss">
page {
  background-color: #F5F5F5;
}

.home {
  &_title {
    display: flex;
    margin-top: 40rpx;

    text {
      width: 10rpx;
      height: 48rpx;
      border-radius: 5rpx;
      background-color: #00A3F1;
    }

    view {
      font-weight: 600;
      font-size: 34rpx;
      color: #2F2F2F;
      line-height: 48rpx;
      margin-left: 16rpx;
    }
  }

  &_header {
    width: 100%;
    padding-top: 32rpx;
    padding-bottom: 24rpx;
    background-color: #fff;

    &_title {
      display: flex;
      margin: 0 34rpx 28rpx 34rpx;

      image {
        width: 32rpx;
        height: 32rpx;
      }

      text {
        margin-left: 20rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #2F2F2F;
        line-height: 32rpx;
      }
    }

    &_banner {
      display: block;
      width: 682rpx;
      height: 386rpx;
      border-radius: 16rpx;
      margin: auto;
    }

    &_navlist {
      display: flex;
      margin: 46rpx 34rpx 0;

      image {
        height: 180rpx;
        width: 100%;
        border-radius: 16rpx;
      }

      // &_item {
      //   display: flex;
      //   flex-wrap: wrap;

      //   image {
      //     width: 130rpx;
      //     height: 130rpx;
      //   }

      //   text {
      //     width: 130rpx;
      //     font-weight: 300;
      //     font-size: 28rpx;
      //     color: #2F2F2F;
      //     line-height: 40rpx;
      //     text-align: center;
      //     display: block;
      //     margin-top: 10rpx;
      //   }
      // }
    }
  }

  &_navigation {
    margin: 0 34rpx;

    &_list {
      padding: 20rpx 30rpx 30rpx 28rpx;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 16rpx;
      margin-top: 16rpx;

      &_item {
        width: calc(100vw - 126rpx);
        height: 48rpx;
        margin-top: 16rpx;
        position: relative;

        .img {
          width: 48rpx;
          height: 48rpx;
          position: absolute;
          left: 0;
        }

        view {
          font-weight: 300;
          font-size: 28rpx;
          color: #2F2F2F;
          line-height: 48rpx;
          position: absolute;
          left: 70rpx;
          max-width: 80%;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;

          /* 显示省略号 */
          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #2F2F2F;
            margin-left: 6rpx;
          }
        }

        .icon {
          width: 16rpx;
          height: 28rpx;
          position: absolute;
          right: 0;
          top: 10rpx;
        }
      }
    }
  }

  &_overview {
    margin: 0 34rpx;

    &_list {
      display: flex;
      margin-top: 18rpx;
      flex-wrap: wrap;
      justify-content: space-between;

      &_item {
        display: flex;
        flex-wrap: wrap;
        width: 206rpx;
        margin-bottom: 30rpx;

        image {
          width: 206rpx;
          height: 144rpx;
          border-radius: 12rpx;
        }

        text {
          font-weight: 300;
          font-size: 24rpx;
          color: #2F2F2F;
          line-height: 34rpx;
          width: 100%;
          text-align: center;
          display: block;
          margin-top: 10rpx;
          white-space: nowrap;
          /* 禁止文本换行 */
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 显示省略号 */
        }
      }
    }
  }

  &_topics {
    margin: 0 34rpx;
    padding-bottom: 50rpx;

    &_list {
      padding: 12rpx 24rpx 0;
      background-color: #fff;
      border-radius: 16rpx;
      margin-top: 16rpx;

      &_item {
        font-weight: 300;
        font-size: 28rpx;
        color: #353535;
        line-height: 72rpx;
        text-align: left;
        height: 72rpx;
        border-bottom: 2rpx solid #EDEDED;
      }

      &_item:last-child {
        border: none;
      }
    }
  }
}
</style>
